<template>
	<view>
		<view>
			<swiper class="swiper" indicator-dots="true" autoplay="true" indicator-color="rgba(255, 255, 255, 0.3)" indicator-active-color="#FFFFFF">
				<swiper-item>
					<image src="../../static/banner1.png" class="banner"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/banner2.png" class="banner"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/banner3.png" class="banner"></image>
				</swiper-item>
			</swiper>
		</view>
		<view style="display: flex;justify-content: space-between;" class="choose">
			<view style="flex:1;display: flex;" v-if="level!=5">
			
				<view style="font-size: 32rpx;" @click="goto()" >{{jiedao}}</view>
				<image src="../../static/btn-screenArrow@3x.png" style="width: 28rpx;height: 28rpx;padding-left:10rpx; padding-top: 6rpx;" @click="goto()"></image>
			</view>
			<view v-else style="font-size: 32rpx;">{{jiedao}}</view>
			
			<view>
				<picker mode="selector" :range="array" :value="ttt" @change="bindchange" range-key="value">
					<view style="display: flex;">
						<view>	
							<view style="font-size: 32rpx;" v-if="!index && !name">时间段选择</view>
							<view style="font-size: 32rpx;" v-else-if="index==4 && date!=''">{{date}} - {{date1}}</view>
							<view style="font-size: 32rpx;" v-else>{{name}}</view>
						</view>	
						<image src="../../static/btn-screenArrow@3x.png" style="width: 28rpx;height: 28rpx;padding-left:10rpx; padding-top: 6rpx;display: inline-block;"></image>
					</view>
				</picker>
					
			</view>
		</view>
		<view class="statistics" @click="gotoW()">
			<image src="../../static/矩形.png" style="width:106rpx;height:42rpx;z-index: -1;"></image>
			<view class="title">数量统计</view>
			<view style="display: flex;flex-direction: row;justify-content: center;">
				<view style="color: #388CFE; font-size: 80rpx;line-height: 64rpx;">{{total}}</view>
				<view style="color: #388CFE; font-size: 32rpx;margin-top: 20rpx;margin-left: 10rpx;">家</view>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: center;font-size: 32rpx;margin-top: 20rpx;">需巡查避灾场所家数</view>
		</view>
		<view>
			<view style="display: flex;">
				<view style="width: 334rpx;height: 260rpx;margin-top:20rpx ;margin-left: 30rpx;box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);" @click="gotoY()">
					<image src="../../static/bg_01.png" style="width: 334rpx;height: 260rpx;" ></image>
					<view style="width: 222rpx;height: 136rpx;position: absolute;margin-left: 56rpx;margin-top: -240rpx;"class="nsag1252">
						<view style="display: flex;flex-direction: row;justify-content: center;">
							<view class="number">{{total1}}</view>
							<view class="jia">家</view>
						</view>
						<view class="xuncha">
							<view class="word">已巡查</view>
							<view class="word1">{{percentage}}%</view>
						</view>
					</view>	
				</view>
				<view @click="gotoW()">
					<image src="../../static/bg_01.png" style="width: 334rpx;height: 260rpx;margin-top:20rpx ;margin-left: 20rpx; box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);"></image>
					<view style="width: 222rpx;height: 136rpx;position: absolute;margin-left: 78rpx;margin-top: -240rpx;"class="nsag125224235">
						<view style="display: flex;flex-direction: row;justify-content: center;">
							<view class="number1">{{total2}}</view>
							<view class="jia1">家</view>
						</view>
						<view class="xuncha1">
							<view class="word">未巡查</view>
							<view class="word1">{{percentage1}}%</view>
						</view>
					</view>
				</view>
			</view>
		</view>	
		<view class="yinhuan">
			<image src="../../static/矩形.png" style="width:106rpx;height:42rpx;z-index: -1;"></image>
			<view class="title">隐患统计</view>
			<view style="display: flex;" class="active532623">
				<view style="width: 128rpx;height: 94rpx; margin-left:108rpx;" @click="XCyinhuan(2)">
					<view style="display: flex;flex-direction: row;justify-content: center;">
						<view style="font-size: 52rpx;color:#E93B3D;line-height: 52rpx;">{{created}}</view>
						<view style="font-size: 28rpx;color:#E93B3D ;padding-top: 10rpx;margin-left: 10rpx;">个</view>
					</view>
					<view style="font-size: 32rpx;color: #333333;">现存隐患</view>
				</view>
				<view style="width: 1rpx;height: 40rpx;background-color:#D8D8D8 ;margin-left: 108rpx;margin-top:16rpx ;"></view>
				<view style="height: 94rpx; margin-left:72rpx;" @click="YZGyinhuan(3)">
					<view style="display: flex;flex-direction: row;justify-content: center;">
						<view style="font-size: 52rpx;color:#60AD35;line-height: 52rpx;">{{finished}}</view>
						<view style="font-size: 28rpx;color:#60AD35 ;padding-top: 10rpx;margin-left: 10rpx;">个</view>
					</view>
					<view style="font-size: 32rpx;color: #333333;">累计整改隐患</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;bottom: 0;height: 140rpx;width: 750rpx;border-top: 1rpx solid #E5E5E5; ">
			<button style="width: 690rpx;height: 94rpx;margin-top: 14rpx;margin-left: 30rpx;border-radius: 47rpx;background-color: #519AFF;color: #FFFFFF;font-size: 36rpx;" @click="saoma">扫码巡查</button>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data(){
			return{
				// array:['全部','本周','本月','本年','按日期查询'],
				array:[
					{value: '全部'},
					{name: 'week', value: '本周'},
					{name: 'month', value: '本月'},
					{name: 'year', value: '本年'},
					{value: '按日期查询'},
				],
				index:'',
				ina:'',
				ttt: '',
				total:'',
				total1:'',
				total2:'',
				percentage:'',
				percentage1:'',
				name:'',
				jiedao:'鄞州区',
				real:true,
				date:'',
				date1:'',
				realdate:false,
				result:'',
				yixuncha:false,
				timeType:'month',
				created:'',
				finished:'',
				areaId:'330212',
				level:''
			}
		},
		methods:{
			bindchange(e){
				console.log(e,'111');
				
				this.index=e.detail.value;
				this.name=this.array[this.index].value;
				this.timeType=this.array[this.index].name;
				console.log(this.name);
				if(this.name=='按日期查询'){
					uni.navigateTo({
						url:'./datesearch/datesearch?jiedao='+this.jiedao
					})
					
				}
				// console.log(this.ina);
				if(this.index!=4){
					this.$myRequest({
						url: '/project_flood/v1/check/anwser/flood/gridProcess',
						data: {userId: "100000000001", community: "", areaId: this.areaId,timeType:this.timeType},
					}).then((res)=>{
						this.total=res.data.data.total;
						this.total1=res.data.data.anwser;
						this.total2=res.data.data.unAnwser;
						this.percentage=res.data.data.rate[0];
						this.percentage1=res.data.data.rate[1];
						this.created=res.data.data.created;
						this.finished=res.data.data.finished;
						// console.log(res.data.data.total);
						
					});
				}
					
				
			},
			async getHome(){
				if(this.index!=4){
					this.$myRequest({
						url: '/project_flood/v1/check/anwser/flood/gridProcess',
						data: {userId: "100000000001", community: "", areaId: this.areaId,timeType:this.timeType},
					}).then((res)=>{
						this.total=res.data.data.total;
						this.total1=res.data.data.anwser;
						this.total2=res.data.data.unAnwser;
						this.percentage=res.data.data.rate[0];
						this.percentage1=res.data.data.rate[1];
						this.created=res.data.data.created;
						this.finished=res.data.data.finished;
						// console.log(res.data.data.total);
						
					});
				}else{
					this.$myRequest({
						url: '/project_flood/v1/check/anwser/flood/gridProcess',
						data: {userId: "100000000001", community: "", areaId: this.areaId,startTime:this.date,endTime:this.date1},
					}).then((res)=>{
						this.total=res.data.data.total;
						this.total1=res.data.data.anwser;
						this.total2=res.data.data.unAnwser;
						this.percentage=res.data.data.rate[0];
						this.percentage1=res.data.data.rate[1];
						this.created=res.data.data.created;
						this.finished=res.data.data.finished;
						// console.log(res.data.data.total);
						
					});
				}
			},
			
			goto(){
				uni.navigateTo({
					url:'areachos?jiedao='+this.jiedao+'&name='+this.name
				})
			},
			gotoW(){
				this.yixuncha=true
				uni.navigateTo({
					// url:'arealist?yixuncha='+this.yixuncha
					url:`arealist?yixuncha=${this.yixuncha}&timeType=${this.timeType}&areaId=${this.areaId}`
				})
			},
			gotoY(){
				this.yixuncha=''
				uni.navigateTo({
					url:`arealist?yixuncha=${this.yixuncha}&timeType=${this.timeType}&areaId=${this.areaId}`
				})
			},
			XCyinhuan(i){
				uni.navigateTo({
					url:`../yinhuan/FXlist?i=${i}&areaId=${this.areaId}&dold=${1}`
				})
			},
			YZGyinhuan(i){
				uni.navigateTo({
					url:`../yinhuan/FXlist?i=${i}&areaId=${this.areaId}&dold=${3}`
				})
			},
			saoma(){
				uni.scanCode({
				    success: (res) => {
				        console.log('条码内容：' + res.result);
						this.result=res.result.split('?')[1].split('=')[1];
						console.log(this.result);
						uni.navigateTo({
							url:'../xuncha/xuncha?id='+this.result
						})
				    }
				});
			}
		},
		onUnload() {
					   uni.reLaunch({
						  url: '../join/firstpage'   //此处是重新定义返回的路径
					   })
				     },
		onLoad(options) {
			if(options.jiedao!=undefined){
				this.jiedao=options.jiedao;
			}else{
				try {
					const A = uni.getStorageSync('userName');
					if(A!='浙江岩土'){
						this.jiedao=A;
					}
					
				    if (A) {
				        // console.log(X);
				    }
					
				} catch (e) {
				    // error
				}
			}
			console.log(this.jiedao);
			if(options.name!=undefined){
				this.name=options.name
			}
			if(options.id!=undefined){
				this.areaId=options.id
			}else{
				try {
					const B = uni.getStorageSync('areaId');
					
						this.areaId=B;
					
					
				    if (B) {
				        // console.log(X);
				    }
					
				} catch (B) {
				    // error
				}
			}
			try {
				const X = uni.getStorageSync('level');
				
					this.level=X;
				
				
			    if (X) {
			        // console.log(X);
			    }
				
			} catch (X) {
			    // error
			}
			console.log(options,'options');
			this.date=options.date;
			this.date1=options.date1;
			this.index=options.index;
		},
		onShow() {
			uni.showLoading({
			    title: '加载中'
			});
			this.getHome().then((res)=>{
				uni.hideLoading();
			})
		}
	}
</script>

<style>
	.swiper{
		height: 300rpx;
		width: 690rpx;
		padding-left: 30rpx;
	},
	.banner{
		width: 100%;
		height: 100%;
	},
	.choose{
		width: 690rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
	},
	.statistics{
		width: 690rpx;
		height: 206rpx;
		margin-left: 30rpx;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin-top: 30rpx;
		
	},
	.title{
			position: absolute;
			font-size: 24rpx;
			margin-top: -48rpx;
			margin-left: 7rpx;
			z-index: 100;
			color: white;
	},
	.number{
		color: #60AD35;
		font-size: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	},
	.jia{
		color: #60AD35;
		font-size: 28rpx;
		margin-top: 30rpx;
		margin-left: 10rpx;
	},
	.number1{
		color: #FB9A17;
		font-size: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	},
	.jia1{
		color: #FB9A17;
		font-size: 28rpx;
		margin-top: 30rpx;
		margin-left: 10rpx;
	},
	.xuncha{
		display: flex;
		flex-direction: row;
		justify-content: center;
	},
	.xuncha1{
		display: flex;
		flex-direction: row;
		justify-content: center;
	},
	.word{
		font-size: 30rpx;
		white-space: nowrap;
	},
	.word1{
		margin-left: 10rpx;
		font-size: 32rpx;
		white-space: nowrap;
	},
	.yinhuan{
		width: 690rpx;
		height: 174rpx;
		margin-top: 20rpx;
		margin-left:30rpx;
		box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
	}
</style>
